<!-- vuex 中的辅助函数的使用 -->

<template>
    <div class="box">
        <h2>Son2 子组件</h2>
        从vuex中获取的值:<label>{{ count }}</label>
        <br/>
        <button @click="subCount(1)">值 - 1</button>
        <button @click="subCount(5)">值 - 5</button>
        <button @click="subCount(10)">值 - 10</button>
        <button @click="changeCountAction(888)">一秒后改成888</button>
        <button @click="changeTitle('好好好')">改标题</button>
        <hr style="border: 1px dashed #000; width: 100%;height: 1px;"/>
        <div>{{ filterList }}</div>
        <hr>
        <!-- 分模块下，使用数据/方法 -->
        <!-- 1.访问<模块中>的 state -->
        <div>{{ user.userInfo.name }}+{{ setting.theme }}</div>
        <div>user模块的数据：{{ userInfo }}</div>
        <!-- 3.测试访问<模块中>的 mutations -->
        <button @click="setUser({name:'xiaowang',age:21})">更新个人信息</button>
        <!-- 4.测试访问<模块中>的 actions -->
        <button @click="asyncSetUserSecond({name:'hhh',age:24})">一秒后更新个人信息</button>
        <div>setting模块的数据：{{ theme }}+{{ desc }}</div>
        <button @click="setTheme('skyblue')">更新主题</button>
        <button @click="asyncUpdateThemeSecond('green')">一秒后更新主题</button>
        <hr style="border: 1px dashed #000; width: 100%;height: 1px;"/>
        <!-- 2.访问<模块中>的 getters -->
        <div>{{ UpperCaseName }}</div>
    </div>
</template>

<script>
import {mapActions, mapGetters, mapMutations, mapState} from 'vuex'

export default {
    name: 'Son2Com',
    computed: {
        // 1.使用 mapState 可以将 state 映射到 computed 中保存
        // ...展开，可以直接使用 count 简化代码
        // 避免多次使用 this.$store.state.xxx
        ...mapState(['count', 'user', 'setting']),
        ...mapState('user', ['userInfo']),
        ...mapState('setting', ['theme', 'desc']),
        // 2.使用 mapGetters 可以将 getters 的属性映射到 computed 中保存
        // 可以直接使用 filterList 简化代码
        // 避免多次使用 this.$store.getters.xxx
        ...mapGetters(['filterList']),
        ...mapGetters('user', ['UpperCaseName'])
    },
    methods: {
        // 2.使用 mapMutations 可以将 mutations 中的函数映射到 methods 中
        // 直接使用 this.xxx 调用方法即可（或者页面之中直接使用），
        // 避免多次使用 this.$store.commit('xxx',参数)
        ...mapMutations(['subCount', 'changeTitle']),
        ...mapMutations('user', ['setUser']),
        ...mapMutations('setting', ['setTheme']),
        // 3.使用 mapActions 可以将异步操作 actions 中的函数映射到 methods 中
        // 直接使用 this.xxx 调用方法即可
        // 避免多次使用 this.$store.dispatch('xxx',参数)
        ...mapActions(['changeCountAction']),
        ...mapActions('user', ['asyncSetUserSecond']),
        ...mapActions('setting', ['asyncUpdateThemeSecond'])
    }
}
</script>

<style lang="css" scoped>
.box {
    border: 3px solid #ccc;
    width: 400px;
    padding: 10px;
    margin: 20px;
}

h2 {
    margin-top: 10px;
}
</style>
